import QtQuick 2.0
import QtQuick.Controls 2.5
import MyBaseSynctaxCpp 1.0
import "../../customqml"
Rectangle {
    id:qml_base_syntax_main_root
    color: "white"
    anchors.fill: parent
    signal qmlSignalShowBaseSyntax(int index,string value)
    Loader{
        id:basesynctaxLoader
        anchors.centerIn: parent
        anchors.fill: parent
    }
    NormalBtn{
        id:qml_quick_start_bt_1
        text: "QML语法"
        anchors{
            left: parent.left
            leftMargin: 30
            top: qml_base_syntax_main_root.top
            topMargin: 30
        }
        font{
            pixelSize: 15
            family: "微软雅黑"
        }
        height: 30
        MouseArea{
            anchors.fill: parent
            acceptedButtons: Qt.LeftButton|Qt.RightButton
            onClicked: {
                if(mouse.button===Qt.LeftButton)
                {
                    basesynctaxLoader.source="/qml/main/QmlInBookMain/QmlQuickStartSub/QmlSyntax.qml"
                }
            }
        }
    }
    NormalBtn{
        id:qml_quick_start_bt_2
        text: "基本元素"
        anchors{
            left: parent.left
            leftMargin: 30
            top: qml_quick_start_bt_1.bottom
            topMargin: 30
        }
        font{
            pixelSize: 15
            family: "微软雅黑"
        }
        height: 30
        MouseArea{
            anchors.fill: parent
            acceptedButtons: Qt.LeftButton|Qt.RightButton
            onClicked: {
                if(mouse.button===Qt.LeftButton)
                {
                    basesynctaxLoader.source="/qml/main/QmlInBookMain/QmlQuickStartSub/QmlBaseElement.qml"
                }
            }
        }
    }
    NormalBtn{
        id:qml_quick_start_bt_3
        text: "组件"
        anchors{
            left: parent.left
            leftMargin: 30
            top: qml_quick_start_bt_2.bottom
            topMargin: 30
        }
        font{
            pixelSize: 15
            family: "微软雅黑"
        }
        height: 30
        MouseArea{
            anchors.fill: parent
            acceptedButtons: Qt.LeftButton|Qt.RightButton
            onClicked: {
                if(mouse.button===Qt.LeftButton)
                {
                    basesynctaxLoader.source="/qml/main/QmlInBookMain/QmlQuickStartSub/QmlCompontent.qml"
                }
            }
        }
    }
    NormalBtn{
        id:qml_quick_start_bt_4
        text: "简单转换"
        anchors{
            left: parent.left
            leftMargin: 30
            top: qml_quick_start_bt_3.bottom
            topMargin: 30
        }
        font{
            pixelSize: 15
            family: "微软雅黑"
        }
        height: 30
        MouseArea{
            anchors.fill: parent
            acceptedButtons: Qt.LeftButton|Qt.RightButton
            onClicked: {
                if(mouse.button===Qt.LeftButton)
                {
                    basesynctaxLoader.source="/qml/main/QmlInBookMain/QmlQuickStartSub/QmlTransformation.qml"
                }
            }
        }
    }
    NormalBtn{
        id:qml_quick_start_bt_5
        text: "定位元素"
        anchors{
            left: parent.left
            leftMargin: 30
            top: qml_quick_start_bt_4.bottom
            topMargin: 30
        }
        font{
            pixelSize: 15
            family: "微软雅黑"
        }
        height: 30
        MouseArea{
            anchors.fill: parent
            acceptedButtons: Qt.LeftButton|Qt.RightButton
            onClicked: {
                if(mouse.button===Qt.LeftButton)
                {
                    basesynctaxLoader.source="/qml/main/QmlInBookMain/QmlQuickStartSub/QmlPositioningElement.qml"
                }
            }
        }
    }
    NormalBtn{
        id:qml_quick_start_bt_6
        text: "布局元素"
        anchors{
            left: parent.left
            leftMargin: 30
            top: qml_quick_start_bt_5.bottom
            topMargin: 30
        }
        font{
            pixelSize: 15
            family: "微软雅黑"
        }
        height: 30
        MouseArea{
            anchors.fill: parent
            acceptedButtons: Qt.LeftButton|Qt.RightButton
            onClicked: {
                if(mouse.button===Qt.LeftButton)
                {
                    basesynctaxLoader.source="/qml/main/QmlInBookMain/QmlQuickStartSub/QmlLayoutItem.qml"
                }
            }
        }
    }
    NormalBtn{
        id:qml_quick_start_bt_7
        text: "输入元素"
        anchors{
            left: parent.left
            leftMargin: 30
            top: qml_quick_start_bt_6.bottom
            topMargin: 30
        }
        font{
            pixelSize: 15
            family: "微软雅黑"
        }
        height: 30
        MouseArea{
            anchors.fill: parent
            acceptedButtons: Qt.LeftButton|Qt.RightButton
            onClicked: {
                if(mouse.button===Qt.LeftButton)
                {
                    basesynctaxLoader.source="/qml/main/QmlInBookMain/QmlQuickStartSub/QmlInputElement.qml"
                }
            }
        }
    }
    NormalBtn{
        id:qml_quick_start_bt_8
        text: "高级用法"
        anchors{
            left: parent.left
            leftMargin: 30
            top: qml_quick_start_bt_7.bottom
            topMargin: 30
        }
        font{
            pixelSize: 15
            family: "微软雅黑"
        }
        height: 30
        MouseArea{
            anchors.fill: parent
            acceptedButtons: Qt.LeftButton|Qt.RightButton
            onClicked: {
                if(mouse.button===Qt.LeftButton)
                {
                    basesynctaxLoader.source="QmlBaseSyntax.qml"
                }
            }
        }
    }
    //C++对象作为QML对象使用
    BaseSynctaxCpp{
        id:cpp_obj
        //可以随时增加对象属性
        //property int counts: 0
       // onAgeChanged: {
        //    counts++
        //    console.log("qml onAgeChanged",counts)
        //}
        //onCountsChanged: {
        //    console.log("qml onCountsChanged",counts)
       // }
    }
    //组件加载完成执行
    Component.onCompleted: {
        //关联信号与信号处理函数的方式同QML中的类型
        //Cpp对象的信号关联到QML
        //cpp_obj.onCppSignalA.connect(()=>console.log("qml signalA process"))
        //cpp_obj.onCppSignalIndex.connect(processShowInfo)

        //QML对象的信号关联到Cpp
        //qml_base_syntax_main_root.qmlSignalShowBaseSyntax.connect(cpp_obj.cppSlotA)
        //qml_base_syntax_main_root.onQmlSignalB.connect(cpp_obj.cppSlotB)
    }
    //定义的函数可以作为槽函数
    function processShowInfo(str,value){
        console.log("qml function processB",str,value)

    }
}
